/* 样式变量 */

:root {
  /* 颜色主题容器 */
  --colors:(
    primary: #409eff,
    success: #67c23a,
    warning: #e6a23c,
    danger: #f56c6c,
    error: #f56c6c,
    info: #909399,
  );
    /* 各大主色 */
    --wf-color-white: #fff;
    --wf-color-black: #000;
    --wf-color-primary: #409eff;
    --wf-color-success: #67c23a;
    --wf-color-warning: #e6a23c;
    --wf-color-danger: #f56c6c;
    --wf-color-error: #f56c6c;
    --wf-color-info: #909399;
    /* 动态生成颜色系 */
    @each $val,$color in var(--colors){
      @for $i from 3 to 9 by 2{
        --wf-color-$(val)-light-$(i):mix(#fff,$(color),.$(i))
      }
      --wf-color-$(val)-light-8:mix(#fff,$(color),.8);
      --wf-color-$(val)-dark-2:mix(#000,$(color),.2);
    }

    /* 中性色（文字，背景，边框，特殊色） */
    /* 背景色 */
    --wf-bg-color: #ffffff;
    --wf-bg-color-page: #f2f3f5;
    --wf-bg-color-overlay: #ffffff;
    /* 文字色 */
    --wf-text-color-primary: #303133;
    --wf-text-color-regular: #606266;
    --wf-text-color-secondary: #909399;
    --wf-text-color-placeholder: #a8abb2;
    --wf-text-color-disabled: #c0c4cc;
    /* 边框色 */
    --wf-border-color: #dcdfe6;
    --wf-border-color-light: #e4e7ed;
    --wf-border-color-lighter: #ebeef5;
    --wf-border-color-extra-light: #f2f6fc;
    --wf-border-color-dark: #d4d7de;
    --wf-border-color-darker: #cdd0d6;
    /* 填充色 */
    --wf-fill-color: #f0f2f5;
    --wf-fill-color-light: #f5f7fa;
    --wf-fill-color-lighter: #fafafa;
    --wf-fill-color-extra-light: #fafcff;
    --wf-fill-color-dark: #ebedf0;
    --wf-fill-color-darker: #e6e8eb;
    --wf-fill-color-blank: #ffffff;

    /* 盒子阴影 */
    --wf-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
    --wf-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
    --wf-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
    --wf-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);

    /* disabled */
    --wf-disabled-bg-color: var(--wf-fill-color-light);
    --wf-disabled-text-color: var(--wf-text-color-placeholder);
    --wf-disabled-border-color: var(--wf-border-color-light);

    /* 动画 */
    --wf-transition-duration: .3s;
    --wf-transition-duration-fast: .2s;
    
    /* overlay */
    --wf-overlay-color: rgba(0, 0, 0, .8);
    --wf-overlay-color-light: rgba(0, 0, 0, .7);
    --wf-overlay-color-lighter: rgba(0, 0, 0, .5);

    /* mask标记 */
    --wf-mask-color: rgba(255, 255, 255, .9);
    --wf-mask-color-extra-light: rgba(255, 255, 255, .3);

    /* border 对应的变量*/
    --wf-border-width: 1px;
    --wf-border-style: solid;
    --wf-border-color-hover: var(--wf-text-color-disabled);
    --wf-border: var(--wf-border-width) var(--wf-border-style) var(--wf-border-color);
    --wf-border-radius-base: 4px;
    --wf-border-radius-small: 2px;
    --wf-border-radius-round: 20px;
    --wf-border-radius-circle: 100%;

    /* 字体相关的样式 */
    --wf-font-size-extra-large: 20px;
    --wf-font-size-large: 18px;
    --wf-font-size-medium: 16px;
    --wf-font-size-base: 14px;
    --wf-font-size-small: 13px;
    --wf-font-size-extra-small: 12px;
    --wf-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --wf-font-weight-primary: 500;
    --wf-font-line-height-primary: 24px;
  
    
    --wf-svg-monochrome-grey: var(--wf-border-color);

    --wf-component-size-large:18px;
    --wf-component-size-small:14px;
    --wf-component-size:16px;



}